// 柱状图1模块
(function () {
    // 实例化对象
    var myChart = echarts.init(document.querySelector(".bar .chart"));
    let data = [300, 400, 350, 800, 1800, 1400, 700]
    const data2 = [200, 300, 250, 600, 1500, 1200, 500];

    // 渲染函数
    function render() {
        // 获取当前年份数据
        const year = Config.getCurrentYear();

        // 指定配置和数据
        var option = {
            color: Config.colors.bar,
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow"
                }
            },
            grid: {
                left: "0%",
                top: "10px",
                right: "0%",
                bottom: "4%",
                containLabel: true
            },
            xAxis: [
                {
                    type: "category",
                    data: [
                        "旅游行业",
                        "教育培训",
                        "游戏行业",
                        "医疗行业",
                        "电商行业",
                        "社交行业",
                        "金融行业"
                    ],
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: "12"
                        }
                    },
                    axisLine: {
                        show: false
                    }
                }
            ],
            yAxis: [
                {
                    type: "value",
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: "12"
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                        }
                    }
                }
            ],
            series: [
                {
                    name: "直接访问",
                    type: "bar",
                    barWidth: "35%",
                    data: data,
                    itemStyle: {
                        barBorderRadius: 5
                    }
                }
            ]
        };

        // 把配置给实例对象
        myChart.setOption(option);
    }

    // 初始渲染
    render();

    // 监听窗口大小变化
    window.addEventListener("resize", function () {
        myChart.resize();
    });
    // 年份切换点击事件
    $(".bar h2").on("click", "a", function () {
        const year = $(this).text();
        Config.setCurrentYear(year);
    });
    if (window.EventBus) {
        window.EventBus.on("updateBarChart", function (district) {
            console.log("柱状图更新:", district.name);
            // 调用fetchData函数获取数据
            fetchData().then(response => {
                const data = response.data;
                console.log(data);
                // 更新柱状图数据
                myChart.setOption({
                    xAxis: {
                        data: data['date']
                    },
                    series: [{
                        name: "直接访问",
                        data: data['max_temp']
                    }]
                });
            }).catch(error => {
                console.error("获取数据失败:", error);
            });
        });
    }

    // 网络请求模拟 http://127.0.0.1:5000/api/test
    async function fetchData() {
        return await axios.get('http://127.0.0.1:5000/api/test')
    }
})();
